import React, {Component} from 'react'
import {Image, Dimensions, View, Text} from 'react-native'
import Swiper from 'react-native-swiper'
import Dot from './Dot'
import ActiveDot from './ActiveDot'
import {IMAGE_RADIO} from '../../utils/configuration'

export default class SwiperImage extends Component {
    render() {
        const {data} = this.props
        return <Swiper
            removeClippedSubviews={false}
            paginationStyle={{
            bottom: 5
        }}
            dot={Dot()}
            activeDot={ActiveDot()}
            width={Dimensions
            .get('window')
            .width}
            height={Dimensions
            .get('window')
            .width * IMAGE_RADIO}
            loop={data.length === 1
            ? false
            : true}
            showsPagination={data.length === 1
            ? false
            : true}>
            {data.map((banner) => (
                <View
                    key={banner}
                    style={{
                    width: Dimensions
                        .get('window')
                        .width,
                    height: Dimensions
                        .get('window')
                        .width * IMAGE_RADIO
                }}
                    key={banner}>
                    <Image
                        defaultSource={require('../../assets/default.png')}
                        source={{
                        uri: banner
                    }}
                        style={{
                        width: Dimensions
                            .get('window')
                            .width,
                        height: Dimensions
                            .get('window')
                            .width * IMAGE_RADIO
                    }}/>
                </View>
            ))}
        </Swiper>
    }
}